<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>4 clone</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->

    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = () => {
            const scene = new BABYLON.Scene(engine);

            /**** Set camera and light *****/
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            buildDwellings();
            return scene;
        }


        //创建建筑群
        const buildDwellings = () => {
            const ground = buildGround();
            //width=1的独立式住房
            const detached_house = buildHouse(1);
            detached_house.rotation.y = -Math.PI / 16;
            detached_house.position.x = -6.8;
            detached_house.position.z = 2.5;
            //width=2的半独立式住房
            const semi_house = buildHouse(2);
            semi_house.rotation.y = -Math.PI / 16;
            semi_house.position.x = -4.5;
            semi_house.position.z = 3;

            //places
            const places = []; //each entry is an array [house type, rotation, x, z]
            places.push([1, -Math.PI / 16, -6.8, 2.5]);
            places.push([2, -Math.PI / 16, -4.5, 3]);
            places.push([2, -Math.PI / 16, -1.5, 4]);
            places.push([2, -Math.PI / 3, 1.5, 6]);
            places.push([2, 15 * Math.PI / 16, -6.4, -1.5]);
            places.push([1, 15 * Math.PI / 16, -4.1, -1]);
            places.push([2, 15 * Math.PI / 16, -2.1, -0.5]);
            places.push([1, 5 * Math.PI / 4, 0, -1]);
            places.push([1, Math.PI + Math.PI / 2.5, 0.5, -3]);
            places.push([2, Math.PI + Math.PI / 2.1, 0.75, -5]);
            places.push([1, Math.PI + Math.PI / 2.25, 0.75, -7]);
            places.push([2, Math.PI / 1.9, 4.75, -1]);
            places.push([1, Math.PI / 1.95, 4.5, -3]);
            places.push([2, Math.PI / 1.9, 4.75, -5]);
            places.push([1, Math.PI / 1.9, 4.75, -7]);
            places.push([2, -Math.PI / 3, 5.25, 2]);
            places.push([1, -Math.PI / 3, 6, 4]);


            //创建实例
            //Create instances from the first two that were built 
            const houses = [];
            for (let i = 0; i < places.length; i++) {
                if (places[i][0] === 1) {//数组套数组，place的每一个数组元素的下标为0对应的值
                    houses[i] = detached_house.createInstance("house" + i);
                    //  newInstance.position.x = index(也就是i);
                    //  newInstance.position.z = index(也就是i);
                }
                else {
                    houses[i] = semi_house.createInstance("house" + i);
                }
                houses[i].rotation.y = places[i][1];
                houses[i].position.x = places[i][2];
                houses[i].position.z = places[i][3];
            }

        }
        /******Build Functions***********/
        const buildGround = () => {
            //color
            const groundMat = new BABYLON.StandardMaterial("groundMat");
            groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);

            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 30, height: 30 });
            ground.material = groundMat;
        }

        const buildHouse = (width) => {
            const box = buildBox(width);
            const roof = buildRoof(width);

            return BABYLON.Mesh.MergeMeshes([box, roof], true, false, null, false, true);
        }
        const buildBox = (width) => {
            //texture
            const boxMat = new BABYLON.StandardMaterial("boxMat");
            if (width == 2) {
                boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/semihouse.png")
            }
            else {
                boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/cubehouse.png");
            }

            //options parameter to set different images on each side
            const faceUV = [];
            if (width == 2) {
                faceUV[0] = new BABYLON.Vector4(0.6, 0.0, 1.0, 1.0); //rear face
                faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.4, 1.0); //front face
                faceUV[2] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //right side
                faceUV[3] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //left side
            }
            else {
                faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face
                faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face
                faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side
                faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side
            }
            // top 4 and bottom 5 not seen so not set

            /**** World Objects *****/
            const box = BABYLON.MeshBuilder.CreateBox("box", { width: width, faceUV: faceUV, wrap: true });
            box.material = boxMat;
            box.position.y = 0.5;

            return box;
        }

        const buildRoof = (width) => {
            //texture
            const roofMat = new BABYLON.StandardMaterial("roofMat");
            roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg");

            const roof = BABYLON.MeshBuilder.CreateCylinder("roof", { diameter: 1.3, height: 1.2, tessellation: 3 });
            roof.material = roofMat;
            roof.scaling.x = 0.75;
            roof.scaling.y = width;
            roof.rotation.z = Math.PI / 2;
            roof.position.y = 1.22;

            return roof;
        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>